<template>
  <div class="order-details">
    <h2>订单详情</h2>

    <el-form @submit.prevent="loadOrderDetails" :model="formData" :rules="rules" ref="orderForm">
      <el-form-item label="订单号" prop="orderId">
        <el-input v-model="formData.orderId" placeholder="请输入订单号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit" :loading="loading">加载订单详情</el-button>
      </el-form-item>
    </el-form>

    <el-alert v-if="error" :title="error" type="error" show-icon></el-alert>

    <div v-if="order" class="order-content">
      <div class="order-summary">
        <p><strong>订单id:</strong> {{ order.id }}</p>
        <p><strong>订单号:</strong> {{ order.orderId }}</p>
        <p><strong>用户名:</strong> {{ order.realName }}</p>
        <p><strong>电话:</strong> {{ order.userPhone }}</p>
        <p><strong>总金额:</strong> {{ order.totalPrice }}</p>
        <p><strong>支付方式:</strong> {{ order.payTypeStr }}</p>
        <p><strong>支付状态:</strong> {{ order.paid ? '已支付' : '未支付' }}</p>
        <p><strong>订单状态:</strong> {{ order.orderStatusMsg }}</p>
        <p><strong>备注:</strong> {{ order.mark }}</p>
        <p><strong>创建时间:</strong> {{ order.createTime }}</p>
        <p v-if="order.payTime"><strong>支付时间:</strong> {{ order.payTime }}</p>
      </div>

      <div class="products-list">
        <h3>商品列表</h3>
        <div v-for="item in order.orderInfoList" :key="item.productId" class="product-item">
          <p><strong>产品 ID:</strong> {{ item.productId }}</p>
          <p><strong>数量:</strong> {{ item.num }}</p>
          <p><strong>单价:</strong> {{ item.price }}</p>
          <p><strong>总价:</strong> {{ item.allPrice }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

const formData = reactive({
  orderId: '',
});

const loading = ref(false);
const error = ref('');
const orderForm = ref(null);

const order = computed(() => store.getters['loadOrderDetails/getOrderDetails']);

const rules = {
  orderId: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
};

const loadOrderDetails = async () => {
  try {
    await orderForm.value.validate();
    loading.value = true;
    error.value = '';

    const result = await store.dispatch('loadOrderDetails/loadOrderDetails', formData.orderId);

    if (!result.success) {
      error.value = result.error || '加载订单详情失败';
    }
  } catch (err) {
    console.error('加载订单详情失败:', err);
    error.value = err.message || '加载订单详情失败，请稍后再试';
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.order-details {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.order-content {
  margin-top: 20px;
}

.order-summary, .products-list {
  margin-bottom: 20px;
}

h3 {
  margin-bottom: 10px;
}

.product-item {
  padding: 10px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

p {
  margin: 5px 0;
}

.el-form {
  margin-bottom: 20px;
}
</style>
